<%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<html>
	<%@include file="/common/simpleFrame.jsp"%>
	<!-- 当前版块ID -->
	<input type="hidden" id="blockId" name="blockId" value="${blockId==null?0:blockId}">
	<!-- 当前分页页码 -->
	<input type="hidden" id="currPage" name="currPage" value="${currPage==null?0:currPage}">
	<!-- 当前版块总页数 -->
	<input type="hidden" id="totalPages" name="totalPages" value="${totalPages==null?0:totalPages}">
	
	<!-- 左侧树 -->
	<div id="forumLogoArea">
		<img src="../images/logo.jpg"></img>
	</div>
	<div id="titleMsg">
		观念影响未来 思想产生力量
	</div>
	<div id="forumTreeDiv">
	</div>
	
	<!-- 右侧顶部区域 -->
	<div id="forumRightTop">
		<div id="forumRightNavArea">
			<table style="width: 100%;height:100%">
				<tr>
					<td>
						JavaScript
					</td>
					<td>
						<a href="#">论坛版规---发帖必看</a>
					</td>
					<td>
						本版斑竹：
						<a href="#">大漠穷秋</a>
						<a href="#">大漠穷秋</a>
						<a href="#">大漠穷秋</a>
						<a href="#">大漠穷秋</a>
						<a href="#">大漠穷秋</a>
					</td>
					<td align="right">
						本版帖子总量：100000000
					</td>
					<td align="right">
						本版回复总量：100000000
					</td>
				</tr>
			</table>
		</div>
		<div id="forumRightHotArea1">
			<table>
				<tr>
					<td class="hotAreaHead">
						本版神贴
					</td>
				</tr>
				<tr>
					<td>
						很长很长很长很长很长的标题啊！！！
					</td>
				</tr>
				<tr>
					<td>
						很长很长很长很长很长的标题啊！！！
					</td>
				</tr>
				<tr>
					<td>
						很长很长很长很长很长的标题啊！！！
					</td>
				</tr>
				<tr>
					<td>
						很长很长很长很长很长的标题啊！！！
					</td>
				</tr>
				<tr>
					<td>
						很长很长很长很长很长的标题啊！！！
					</td>
				</tr>
				<tr>
					<td>
						很长很长很长很长很长的标题啊！！！
					</td>
				</tr>
				<tr>
					<td>
						很长很长很长很长很长的标题啊！！！
					</td>
				</tr>
				<tr>
					<td>
						很长很长很长很长很长的标题啊！！！
					</td>
				</tr>
				<tr>
					<td>
						很长很长很长很长很长的标题啊！！！
					</td>
				</tr>
				<tr>
					<td>
						很长很长很长很长很长的标题啊！！！
					</td>
				</tr>
				<tr>
					<td>
						<a href="#">如何让我的帖子成为神贴...</a>
					</td>
				</tr>
			</table>
		</div>
		<div id="forumRightHotArea2">
			<table>
				<tr>
					<td class="hotAreaHead">
						本版神人
					</td>
				</tr>
				<tr>
					<td>
						大漠穷秋大漠穷秋大漠穷秋
					</td>
				</tr>
				<tr>
					<td>
						大漠穷秋
					</td>
				</tr>
				<tr>
					<td>
						大漠穷秋
					</td>
				</tr>
				<tr>
					<td>
						大漠穷秋
					</td>
				</tr>
				<tr>
					<td>
						大漠穷秋
					</td>
				</tr>
				<tr>
					<td>
						大漠穷秋
					</td>
				</tr>
				<tr>
					<td>
						大漠穷秋
					</td>
				</tr>
				<tr>
					<td>
						大漠穷秋
					</td>
				</tr>
				<tr>
					<td>
						大漠穷秋
					</td>
				</tr>
				<tr>
					<td>
						大漠穷秋
					</td>
				</tr>
				<tr>
					<td>
						<a href="#">如何才能成为神人...</a>
					</td>
				</tr>
			</table>
		</div>
		<div id="forumRightHotArea3">
			<table>
				<tr>
					<td class="hotAreaHead">
						本版QQ群
					</td>
				</tr>
				<tr>
					<td>
						253445528(已满)
					</td>
				</tr>
				<tr>
					<td>
						253445528(已满)
					</td>
				</tr>
				<tr>
					<td>
						253445528(已满)
					</td>
				</tr>
				<tr>
					<td>
						253445528(已满)
					</td>
				</tr>
				<tr>
					<td>
						253445528(已满)
					</td>
				</tr>
				<tr>
					<td>
						253445528(已满)
					</td>
				</tr>
				<tr>
					<td>
						253445528(已满)
					</td>
				</tr>
				<tr>
					<td>
						253445528(已满)
					</td>
				</tr>
				<tr>
					<td>
						253445528(已满)
					</td>
				</tr>
				<tr>
					<td>
						253445528(已满)
					</td>
				</tr>
				<tr>
					<td>
						<a href="#">群规...</a>
					</td>
				</tr>
			</table>
		</div>
		<div id="forumRightHotArea4">
			
		</div>
	</div>

	<!-- 右侧中部按钮区域 -->
	<div id="forumMiddleArea">
		<input type="text" style="width: 220px;"></input>
		<button>
			搜索帖子
		</button>
		<c:if test="${userName!=null}">
			<button id="newPostBtn">
				发新帖
			</button>
			<button>
				我要当斑竹
			</button>
		</c:if>
	</div>

	<!-- 帖子列表区域 -->
	<div id="postTableArea">
		<table id="forumPostTable">
			<thead>
				<tr style="background-color: #333;color: #fff;">
					<th>
						标题
					</th>
					<th>
						作者
					</th>
					<th>
						浏览
					</th>
					<th>
						回复
					</th>
					<th>
						最新回复
					</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
	</div>

	<!-- 右侧底部工具条区域 -->
	<div id="rightBottomArea">
		<div id="pagingToolBarArea"></div>
	</div>

	<!-- 分割线 -->
	<img id="forumHLine1" src="../images/u84.png" />
	<img id="forumVLine1" src="../images/u81.png" />

	<div id="forumFooter">
		当前共有25000人在线，其中注册会员6000人 显示列表 查看统计
	</div>

	<link href="../css/forum.css" type="text/css" rel="stylesheet" />
	<!-- JQuery树插件 -->
	<link rel="stylesheet" href="../common/jquery.treeview/jquery.treeview.css" />
	<script src="../common/jquery.treeview/lib/jquery.cookie.js" type="text/javascript"></script>
	<script src="../common/jquery.treeview/jquery.treeview.js" type="text/javascript"></script>

	<!-- JQuery分页工具条插件 -->
	<link rel="stylesheet" type="text/css" href="../common/jquery.paginate/css/jquery.paginate.css" media="screen" />
	<script src="../common/jquery.paginate/jquery.paginate.js" type="text/javascript"></script>
	<script src="../common/jquery.d.imagechange-1.3/js/jquery.d.imagechange.js"></script>
	<script type="text/javascript">
		var imgData = [
			{title:'芯片工厂',desc:'一个不为人知的所在',src:'../images/mg_5919.jpg',href:'http://www.google.com.hk',target:'_blank',width:385,height:250},
			{title:'太空服',desc:'高清洁度的无尘空间',src:'../images/mg_6026.jpg',width:385,height:250},
			{title:'晶硅模板',desc:'你无法想像的工艺品',src:'../images/mg_6166.jpg',width:385,height:250}
		];
		$(document).ready(function(){
			
			$('#forumRightHotArea4').d_imagechange({
				data:imgData
			});
			
			$("#newPostBtn").click(function(){
				window.location.href="writePost.jsp";
			})
		})
	</script>
	
	<!-- 帖子列表 -->
	<c:if test="${posts30!=null}">
		<script type="text/javascript">
		var postDatas=${posts30};
		
		function setTableCSS(){
			var classNames={
				0:'first',
				1:'second',
				2:'third'
			};
			$("#forumPostTable tbody tr").not("th").each(function(index){
				if($(this).attr('id')=='emptyText'){
					return;
				}
				$(this).addClass(classNames[index%2]);
				$(this).click(function(){
					var postId=($(this).children('td').eq(0).html());
					location.href="readPost.action?postId="+postId;
				});
				$(this).mouseover(function(){
					$(this).addClass('forumTrFocus');
				})
				.mouseout(function(){
					$(this).removeClass('forumTrFocus');
				});
			});
		}
		
		$(document).ready(function(){
			//构建帖子列表
			var createPostList=function(jsonArr){
				$.tpl('post', [
				    "<tr>",
						"<td style='display:none;'>",
							"{id:s}",
						"</td>",
						"<td width='60%'>",
							"{title:s}",
						"</td>",
						"<td width='10%' align='center'>",
							"{userName:s}",
						"</td>",
						"<td width='5%' align='center'>",
							"{readTimes:s}",
						"</td>",
						"<td width='5%' align='center'>",
							"{commentTimes:s}",
						"</td>",
						"<td width='20%' align='center'>",
							"{lastComment:s}",
						"</td>",
					"</tr>"
				]);
				
				var resultStr="";
				$.each(postDatas,function(idx,item){
					resultStr+=$.tpl('post', {
					     id: item.post_id,
					     title:item.title,
					     userName: item.user_id,
					     readTimes: item.read_times,
					     commentTimes: item.comment_times,
					     lastComment: item.time
					}, true);
				});
				$("#forumPostTable").append(resultStr);
			}
			createPostList();
			setTableCSS();
		})
		</script>
	</c:if>
	
	<c:if test="${totalPages!=null&&totalPages>1}">
		<script type="text/javascript">
			$(document).ready(function(){
				//显示分页工具条
				$("#pagingToolBarArea").paginate({
					count:${totalPages}, 				//总页数
					start:${pageIndex},					//默认选中第几页
					display:50,							//显示的分页数
					border: true,						//是否有边框
					border_color: '#000',				//边框颜色
					text_color: '#000',					//分页文字颜色
					background_color: '#fff',			//分页背景颜色	
					border_hover_color:'#000',			//边框鼠标移入上去颜色
					text_hover_color:'#000',			//文字鼠标移入上去颜色
					background_hover_color:'#ff6600',	//背景鼠标移入上去颜色
					images: false,						//翻页是否用图片显示
					mouse: 'press',
					onChange: function(page){			//点击事件
							     //切换分页时需要传递：版块ID，页码
							     //$('._current','#paginationdemo').removeClass('_current').hide();
								 //$('#p'+page).addClass('_current').show();
								 var blockId=$("#blockId").val();
							  	 window.location.href="loadPosts30.action?blockId="+blockId+"&pageIndex="+page;
							  }
				});
			})
		</script>
	</c:if>
	
	<!-- 左侧树 -->
	<c:if test="${fTree!=null}">
		<script type="text/javascript">
			var treeStr=${fTree}+"";
			$(document).ready(function(){
				$("#forumTreeDiv").append(treeStr);
				$("#navigation").treeview({
					persist: "location",
					collapsed: false,
					unique: false
				});
				//默认选中第一个版块
				//var obj=$("#navigation li>a").eq(0);
				//obj.addClass("selected");
			})
		</script>
	</c:if>
</html>
